<template>
    <homeBase>
        <template v-slot:title>
            添加病人信息
        </template>
        <!-- <search /> -->
        <template v-slot:container>
            <div class="patient-info">
            <table class="patient-data">
                <tr>
                    <td class="key">姓名</td><td colspan="4" class="value" id="name" @blur="td_change1($event)">{{ patient.name }}</td>
                    <td class="key">出生年日</td><td colspan="3" class="value" id="birthday" @blur="td_change1($event)">{{ patient.birthday }}</td>
                    <td colspan="1" style="fontSize:10px" v-show="patient.age">年龄：{{ patient.age }}</td>
                </tr>
                <tr>
                    <td class="key">身份证号</td><td colspan="4" class="value" id="card_id" @blur="td_change1($event)">{{ patient.card_id }}</td>
                    <td class="key">手机号码</td><td colspan="4" class="value" id="phone" @blur="td_change1($event)">{{ patient.phone }}</td>
                </tr>
                <tr>
                    <td class="key">最近看病时间</td><td colspan="4" class="value" id="last_time" @blur="td_change1($event)">{{ patient.last_time }}</td>
                    <td class="key">医保类别</td><td colspan="4" class="value" id="medical_insurance" @blur="td_change1($event)">{{ patient.medical_insurance }}</td>
                </tr>
                <tr>
                    <td class="key">目前身体状况</td><td colspan="4" class="value" id="health" @blur="td_change1($event)">{{ patient.health }}</td>
                    <td class="key">性别</td><td colspan="4" class="value" id="gender" @blur="td_change1($event)">{{ patient.gender }}</td>
                </tr>
                <tr>
                    <td colspan="10" style="fontWeight:bolder" >病历</td>
                </tr>
            </table>
            <div class="button">
                <button class="edit" @click="edit($event)">{{ button_text }}</button>
                <button v-show="submitShow" class="clear" @click="clear($event)">清空</button>
                <button v-show="submitShow" class="submit" @click="submit">提交</button>
                <!-- <button v-show="submitShow" class="add_medical_record" @click="add_medical_record">新增病历</button>
                <button v-show="submitShow" class="add_medical_record" @click="del_medical_record">删除病历</button> -->
            </div>
            </div>
        </template>
    </homeBase>
    
</template>

<script>
import homeBase from '@/components/home/homeBase.vue'
export default {
    props:['title'],
    data(){
        return{
            submitShow:false,
            button_text:'编辑信息',
            select_medical_record:null,
            patient:{
                name:"",
                birthday:"",
                card_id:"",
                phone:"",
                last_time:"",
                register_n:"",
                health:"",
                gender:"",
                medical_record:[],
                treat_record:[],
            },
            new_patient:{},
        }
    },
    components:{
        homeBase
    },
    methods:{
        edit(e){  // 编辑信息
            let el = document.querySelectorAll(".value")
            if(this.button_text=='编辑信息'){
                this.button_text='取消'
                this.submitShow=!this.submitShow
                el.forEach(item=>{
                    item.setAttribute("contentEditable",this.submitShow)
                })
                el[0].focus()
            }else{
                // this.button_text='编辑信息'
                // this.submitShow=!this.submitShow
                // el.forEach(item=>{
                //     item.setAttribute("contentEditable",this.submitShow)
                // })
                window.close()
            }
        },
        clear(e){  // 清空所填的数据
            this.patient={}

        },
        add_medical_record(){  // 添加病历
            let time = new Date().toLocaleDateString().replace(/\//g,"-")
            this.patient.medical_record.push([time+this.patient.medical_record.length,{"treat_hospital":"重庆大坪医院","treat_docter":"","medical_record_description":"","prescription":"","use_medicinal":"","treatment_results":""}])
            
            // let fragment = document.createDocumentFragment()
            // let tr1 = document.createElement("tr")
            // let tr2 = document.createElement("tr")
            // let tr3 = document.createElement("tr")
            // let index = this.patient.medical_record.length-1;
            // tr1.innerHTML=`<td class="key value" @blur="td_change($event,index,0)" rowspan="3"> ${this.patient.medical_record[index][0]}</td><td>ok</td><td>ok</td><td>ok</td><td>ok</td>`
            // tr2.innerHTML=`<td>ok</td><td>ok</td><td>ok</td><td>ok</td>`
            // tr3.innerHTML=`<td>ok</td><td>ok</td><td>ok</td><td>ok</td>`
            // fragment.appendChild(tr1)
            // fragment.appendChild(tr2)
            // fragment.appendChild(tr3)
            // let table =  document.querySelector("table")
            // document.querySelector("table").appendChild(fragment)

            setTimeout(()=>{
                let el = document.querySelectorAll(".value")
                el.forEach(item=>{
                    item.setAttribute("contentEditable",this.submitShow)
                })
            })
            // let el = document.querySelectorAll(".value")
            // el.forEach(item=>{
            //     item.setAttribute("contentEditable",this.submitShow)
            // })
        },
        del_medical_record(){  // 删除病历
            if(this.select_medical_record==null){
                this.$toast.fail("请先点击要删除的病历")
                return
            }
            this.patient.medical_record.splice(this.select_medical_record,1)
            console.log(this.patient.medical_record);
            // this.new_patient.medical_record.splice(this.select_medical_record,1)
            this.select_medical_record=null
            // setTimeout(()=>{
            //     let el = document.querySelectorAll(".value")
            //     el.forEach(item=>{
            //         item.setAttribute("contentEditable",this.submitShow)
            //     })
            // })
        },
        current_medical_record(index){  // 记录当前选择的病历
            // el.currentTarget.style.backgroundColor="#f1f1f1"
            this.select_medical_record=index
        },
        td_change(el,index,num){  // 输入病历信息后，保存病历信息
            if(num==0){
                this.patient.medical_record[index].splice(0,1,el.currentTarget.innerText.trim())
            }else if(num==1){
                let e = el.currentTarget
                let id = e.getAttribute("id")
                this.patient.medical_record[index][id]=e.innerText.trim()
            }
        },
        td_change1(e){  // 保存基本资料
            let el = e.currentTarget
            let id = e.currentTarget.getAttribute("id")
            this.patient[id]=el.innerText.trim()
        },
        check_data(){  // 检查输入的信息是否正确
            for (let item in this.patient){
                if(this.$my_tools.check_data[item]){ 
                    let msg=this.$my_tools.check_data[item](this.patient[item])
                    if(msg){
                        this.$toast(msg)
                        return false
                    }
                }
            }
        },
        submit(){  // 提交新病人信息
            if(this.check_data()==false){
                return
            }
            let conf = confirm("你确定要添加该信息吗")
            if(!conf){
                console.log("取消编辑");
                return
            }
            
            // 发送ajax请求，保存数据
            console.log(this.patient,"提交");
            this.$http({
                method:'post',
                url:'/ajax/api/add_patient',
                data:{
                    patient:this.patient
                }
            }).then(data=>{
                if(data.data=="ok"){
                    this.$toast.success("添加成功")
                    this.$http({
                        method:'post',
                        url:'/ajax/api/search_patient',
                        data:{
                            patient:{name:this.patient.name}
                        }
                    }).then(data=>{
                        // 添加成功后，返回病人信息页面，并查询刚刚添加的病人
                        this.$store.state.patient = data.data.patient_list
                        this.$store.state.patient.forEach((item,index)=>{
                            this.$store.state.patient[index]["age"]= this.$my_tools.getAge(item["birthday"])
                        })
                        if(this.$route.path=="/add_patient"){
                            this.$router.push("/patientInfo")
                        }
                    })
                    // this.$router.push('/')
                }else{
                    this.$toast.fail("添加失败，发生未知错误")
                    return
                }
            })
            // document.querySelectorAll(".edit")[0].innerText="编辑信息"
            // this.submitShow=false
            // let values = document.querySelectorAll(".value")
            // values.forEach((item,index)=>{
            //     item.setAttribute("contentEditable",this.submitShow)
            // })

            // this.$router.push('/')
        },
    },
    computed:{
    },
    mounted(){
        if(this.$store.state.new_patient != null){
            console.log(this.$store.state.new_patient);
            this.patient=this.$store.state.new_patient
        }
        this.edit()
        setTimeout(()=>{
            let el = document.querySelectorAll(".value")
            el.forEach(item=>{
                item.setAttribute("contentEditable",this.submitShow)
            })
        })
    },
    beforeUnmount(){
        this.$store.state.new_patient=this.patient
    }
}
</script>

<style lang='scss' scoped>

.patient-info{
    border: 1px solid #ccc;
    // width: 90%;
    height: 80%;
    margin-top: 5px;
    padding: 5px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    // 表格样式
    table{
        flex:0 0 auto;
    }
    table,tr,td{
        border: 1px solid #aaa;
        vertical-align: middle;
    }
    td{
        padding: 8px;
        // margin: 10px;
    }
    .value{
        width: 200px;
        word-break: break-all;
    }
    .key{
        font-weight: bolder;
        width: 100px;
    }
    .button{
        display: flex;
        margin-left: 10px;
        // flex:1;
        flex-direction: column;
        button{
            margin-bottom: 10px;
        }
    }
    .center{
        font-weight: bolder;
        // text-align: center;
    }
    .select{
        background-color: #f1f1f1;
    }
}
</style>
<style lang="scss">
</style>